<template>
    <div class="see-more">
        <div class="more-left">
            {{title}}
        </div>
        <div class="more-right" v-if="hasRight" @click="more">
            <div class="more-text">{{text}}</div>
            <div class="more-icon">
                <svg class="icon right" aria-hidden="true">
                    <use xlink:href="#icon-arrow_right"></use>
                </svg>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "see-more",
        props:{
            text: {
                type: String,
                default: '查看更多'
            },
            title:{
                type: String
            },
            hasRight: {
                type: Boolean
            }
        },
        methods:{
            more(){
                this.$emit('more')
            }
        },
    }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl'
    .see-more{
        display flex
        justify-content space-between
        align-items center
        color gray9
        font-size vw(12)
    }
    .more-left{
        word-vw(word14, gray3)
        line-height vw(19)
    }
    .more-right{
        display flex
        justify-content flex-end
        align-items center
        .more-text{
            line-height vw(19)
        }
        .right{
            width vw(12)
            height vw(15)
            margin-left titleMargin
        }
    }

</style>